<template>
	<view class="my-page">
		<view class="u-font-32 blod u-p-t-10">问题类型</view>
		<view class="u-flex u-m-t-30 tab">
			<text :class="{active:tab==0}" @click="tab=0">产品建议</text>
			<text :class="{active:tab==1}" @click="tab=1">功能BUG</text>
			<text :class="{active:tab==2}" @click="tab=2">其他建议</text>
		</view>
		<view class="u-font-32 blod u-p-t-40"><text class='red'>*</text>问题描述或建议</view>
		<textarea v-model="textareaVal" class="textarea u-m-t-20" placeholder="请输入您使用过程中遇到的问题或者建议" />
		<view class="u-font-32 blod u-p-t-40">姓名</view>
		<input v-model="nameVal" class="input" placeholder="请输入您的姓名" />
		<view class="u-font-32 blod u-p-t-40">联系方式</view>
		<input v-model="telephoneVal" class="input" placeholder="请输入您的联系方式" />
		<u-button class="block u-m-t-80" @click="handleSave" shape="circle" type="success">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 0,
				textareaVal: '',
				nameVal: '',
				telephoneVal: ''
			}
		},
		onLoad() {

		},
		methods: {
			// 意见反馈
			handleSave() {
				// console.log(this.tab,this.textareaVal,this.nameVal,this.telephoneVal);
				if (!this.textareaVal || !this.nameVal || !this.telephoneVal) return uni.showToast({
					icon: 'error',
					title: '信息不能为空!',
					duration: 2000
				});
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.other_feedback,
					method: 'post',
					data: {
						tag: this.handleTag(this.tab),
						content: this.textareaVal,
						name: this.nameVal,
						mobile: this.telephoneVal
					}
				}).then(res => {
					// console.log(res,'意见反馈成功');
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							icon:'success',
							title:'提交成功!',
							duration:2000
						})
						uni.navigateTo({
							url: '/pages/my/feedback-success'
						})
					}
				})

			},

			// 问题类型处理函数
			handleTag(tag) {
				if (tag == 0) {
					return '产品建议'
				} else if (tag == 1) {
					return '功能BUG'
				} else if (tag == 2) {
					return '其他建议'
				}
			}
		}
	}
</script>

<style lang="scss">
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		background-color: #fff !important;
	}

	.my-page {
		.tab {
			text {
				width: 180rpx;
				height: 60rpx;
				border: 1px solid #CCCCCC;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				@extend .flex-center;
				margin-right: 20rpx;
			}

			text.active {
				color: #07C160;
				border-color: #07C160;
			}
		}

		.textarea {
			width: 690rpx;
			height: 300rpx;
			background: #F7F7F7;
			border-radius: 14rpx;
			padding: 30rpx;
			box-sizing: border-box;
		}

		.input {
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #F7F7F7;
			border-radius: 14rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}
	}
</style>